<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="css/led.css">
		<style>
			body {
				background-color: #000;
			}
			.circle {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: red;
				transform: translateY(-90px);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<template v-for='(i, index) in date'>
				<my-led :value='i'></my-led>
				<span v-if="index == 3 || index == 5 || index == 7" class="circle"></span>
			</template>
			<template v-for='(i, index) in time'>
				<my-led :value='i'></my-led>
				<span v-if="index == 1 || index == 3" class="circle"></span>
			</template>
		</div>
		<script src="js/led.js"></script>
		<script>
			Vue.createApp({
				components: {
					'my-led': Led
				},
				data() {
					return {
						time: [0, 0, 0, 0, 0, 0],
						date: [0, 0, 0, 0, 0, 0, 0, 0]
					}
				},
				created() { // 定时器
					setInterval(this.getTime, 1000);
				},
				methods: {
					getTime() {
						// 获取当前时间
						var now = new Date();
						// 获取年月日
						let y = now.getFullYear();
						let m = now.getMonth() + 1;
						let d = now.getDate();
						// 获取时分秒
						let h = now.getHours();
						let min = now.getMinutes();
						let s = now.getSeconds();
						// 更新时间数组 (年月日)
						this.date[0] = parseInt(y / 1000);
						this.date[1] = parseInt((y % 1000) / 100);
						this.date[2] = parseInt((y % 100) / 10);
						this.date[3] = parseInt(y % 10);
						this.date[4] = parseInt(m / 10);
						this.date[5] = parseInt(m % 10);
						this.date[6] = parseInt(d / 10);
						this.date[7] = parseInt(d % 10);
						// 更新时间数组（时分秒）
						this.time[0] = parseInt(h / 10);
						this.time[1] = parseInt(h % 10);
						this.time[2] = parseInt(min / 10);
						this.time[3] = parseInt(min % 10);
						this.time[4] = parseInt(s / 10);
						this.time[5] = parseInt(s % 10);
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
